<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" id="fileInput" />
  </body>
  <script>
    /**
     * 压缩图片
     * @param {File} file - 用户上传的图片文件
     * @param {number} quality - 压缩后的图片质量（0 到 1 之间）
     * @returns {Promise<File>} 压缩后的图片文件
     */
    function compressImage(file, quality = 0.7) {
      return new Promise((resolve, reject) => {
        // 检查文件是否是图片
        if (!file.type.match("image.*")) {
          reject(new Error("请上传图片文件"));
          return;
        }

        const img = new Image();
        img.src = URL.createObjectURL(file);
        img.onload = () => {
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");

          // 设置最大宽度和高度，避免图片过大
          const maxWidth = 1920;
          const maxHeight = 1080;
          let width = img.width;
          let height = img.height;

          // 按比例缩放图片
          if (width > maxWidth || height > maxHeight) {
            if (width / height > maxWidth / maxHeight) {
              width = maxWidth;
              height = Math.floor((img.height * maxWidth) / img.width);
            } else {
              height = maxHeight;
              width = Math.floor((img.width * maxHeight) / img.height);
            }
          }

          canvas.width = width;
          canvas.height = height;

          // 绘制图片到 canvas
          ctx.drawImage(img, 0, 0, width, height);

          // 压缩图片并转换为 Blob
          canvas.toBlob(
            (blob) => {
              URL.revokeObjectURL(img.src); // 释放 URL
              resolve(blob);
            },
            file.type, // 保持原始图片格式
            quality
          );
        };
        img.onerror = (error) => {
          URL.revokeObjectURL(img.src);
          reject(error);
        };
      });
    }

    // 使用示例
    const fileInput = document.getElementById("fileInput");
    fileInput.addEventListener("change", async (e) => {
      const file = e.target.files[0];
      console.log('原图片大小 :>> ', file);
      if (file) {
        try {
          const compressedFile = await compressImage(file); // 压缩质量设置为 0.7
          console.log("压缩后的图片文件:", compressedFile);
          // 可以在这里将 compressedFile 上传到服务器
        } catch (error) {
          console.error("压缩图片出错:", error);
        }
      }
    });
  </script>
</html>
